<template>
	<div class="message" :msg='15615'>
		<div class="5">
			<el-form 
			:label-position="labelPosition" 
			ref="form" :model="form" 
			label-width="80px">
			  
			  <el-form-item label="头像">
				  <el-upload
					class="avatar-uploader"
					action="http://localhost:3000/avatar"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload">
					<img v-if="form.avatar" :src="form.avatar" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				  </el-upload>
			  </el-form-item>
				
			  <el-form-item label="Id">
				<el-input v-model="form._id" disabled></el-input>
			  </el-form-item>
				
			  <el-form-item label="用户名">
			    <el-input v-model="form.username"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="旧密码"> 
			    <el-input v-model="form.oldpassword" show-password></el-input>
			  </el-form-item>
			  
			  <el-form-item label="新密码">
			    <el-input v-model="form.newpasswordOne" show-password></el-input>
			  </el-form-item>
			  
			  <el-form-item label="确认新密码">
			    <el-input v-model="form.newpasswordTwo" show-password></el-input>
			  </el-form-item>
			  
			  <el-form-item label="性别">
			    <el-radio-group v-model="form.sex">
			      <el-radio label="男"></el-radio>
			      <el-radio label="女"></el-radio>
			    </el-radio-group>
			  </el-form-item>
			  

			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">修改</el-button>
			    <el-button >取消</el-button>
			  </el-form-item>
			  
			</el-form>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {

		data() {
			return {
				labelPosition: "top", //表单上对齐
				form: {
				  _id: '',
				  avatar: '',
				  username: '',
				  sex: '',
				  oldpassword: '',
				  newpassword: '',
				  newpasswordOne: '',
				  newpasswordTwo: '',
				}
			}
		},
		computed: {
			
		},
		methods: {
			handleAvatarSuccess(res, file) {
				//res：后端直接返回当前图片的base64编码，并直接渲染到当前的头像上
				this.form.avatar = res
			},
			//检查图片是否合格的钩子
			beforeAvatarUpload(file) {
			  const isJPG = file.type === 'image/jpeg';
			  const isLt2M = file.size / 1024 / 1024 < 2;
					
			  if (!isJPG) {
			    this.$message.error('上传头像图片只能是 JPG 格式!');
			  }
			  if (!isLt2M) {
			    this.$message.error('上传头像图片大小不能超过 2MB!');
			  }
			  return isJPG && isLt2M;
			},
			onSubmit() {
			        console.log('modify start!');
					//为空直接返回
					if(this.form.newpasswordOne == '' || this.form.newpasswordTwo == '') {
						this.$message.info('输入密码为空')
						return;
					}
					//整合两次密码，并发送请求
					if(this.form.newpasswordOne == this.form.newpasswordTwo) {
						this.form.newpassword = this.form.newpasswordOne
						
						axios.post('http://localhost:3000/modify',{
							_id: this.form._id,
							avatar: this.form.avatar,
							username: this.form.username,
							oldpassword: this.form.oldpassword,
							password: this.form.newpassword,
							sex: this.form.sex
						}).then(value => {
							localStorage.setItem('_id', this.form._id)
							localStorage.setItem('username', this.form.username)
							localStorage.setItem('password', this.form.newpassword)
							localStorage.setItem('sex', this.form.sex)
							localStorage.setItem('avatar', this.form.avatar)	
						})
						
					}else {
						this.$message.info('两次输入密码不一致')
					}

					console.log('modify end!');
			}
		},
		watch:{
			
		},
		mounted() {
			//渲染数据到当前页面
			this.form._id = this.$store.state.User._id
			this.form.avatar = this.$store.state.User.avatar
			this.form.username = this.$store.state.User.username
			this.form.sex = this.$store.state.User.sex == 0? "男": "女"
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
	  border: 1px dashed #d9d9d9;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: #409EFF;
	}
	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  line-height: 178px;
	  text-align: center;
	}
	.avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
	
	.message {
		background-color: ;
		padding: 0 2vw;
		margin-top: 10px;
		/* width: 97vw; */
		overflow: hidden;
		text-align: left;
	}
	.el-input {
	}
</style>
